<template>
	<view>
		<view class="phone-header">
			<image src="../images/lifepayBg.474226aa.png" mode="widthFix" style="width: 100%;display: flex;"></image>
			<view class="phone-header-tips" @click="jumpPhone()">
				<view>
					<image src="../images/lifeTab01.png" mode="widthFix" style="display: flex;width: 40upx;"></image>
				</view>
				<text>话费充值</text>
			</view>
			
			<view class="phone-header-tips check-this" style="margin-left: 210rpx;">
				<view>
					<image src="../images/lifeTab01.png" mode="widthFix" style="display: flex;width: 40upx;"></image>

				</view>
				<text>{{title}}</text>
			</view>
			<view class="phone-header-tips" @click="jumpOrder()" style="margin-left: 480rpx;background-color: #00000033;">
				<view>
					<image src="/static/img/tw_icon.png" mode="widthFix" style="display: flex;width: 40upx;"></image>
				</view>
				<text style="color: white;">查看订单></text>
			</view>
		</view>
		<view style="padding: 20upx;margin-top: -140upx;position: relative;z-index: 22;">
			<view class="phone-container">
				<view class="phone-container-group" style="padding-top: 20upx;">
					<!-- <view class="phone-container-group_title">
						<text>电费类型</text>
					</view> -->
					<view class="phone-container-group_list">
						<view class="phone-container-group_list-item base-4" style="padding: 10upx 0;"
							:class="life_type==item.key?'select':''" v-for="item in lifeList" :key="item.id"
							@click="lifeTypeChange(item.key,item.name);opSelect = 'gw'">
							<text>{{item.name}}</text>
						</view>
						<view class="base-4"></view>
						<view class="base-4"></view>
					</view>
				</view>
				<view class="phone-container-group" style="padding-top: 20upx;" v-show="life_type == 'electric'">
					<!-- <view class="phone-container-group_title">
						<text>电费类型</text>
					</view> -->
					<view class="phone-container-group_list">
						<view class="phone-container-group_list-item base-4" style="padding: 10upx 0;"
							:class="opSelect==item.key?'select':''" v-for="item in operatorList" :key="item.id"
							@click="opSelectChange(item.key)">
							<text>{{item.name}}</text>
						</view>
						<view class="base-4"></view>
						<view class="base-4"></view>
					</view>
				</view>
				<view class="phone-container-input">
					<input v-model="phone" placeholder="请填写充值户号">
				</view>
				<view class="phone-container-input" v-show="opSelect == 'nw'">
					<input v-model="idcard" placeholder="请填写身份证后六位">
				</view>

				<view class="phone-container-input">

					<uni-data-picker :localdata="pickerItems" :border="false" :placeholder="regiondata || ''"
						@change="regionchange">
						<text style="font-size: 28upx;"
							:class="regionName?'':'color1'">{{ regiondata ? regiondata : '选择城市'}}</text>
					</uni-data-picker>
				</view>


				<view class="phone-container-group">
					<view class="phone-container-group_title">
						<text>充值套餐</text>
					</view>
					<view class="phone-container-group_list">
						<view class="phone-container-group_list-item base-3" :class="packageSelect==item.id?'select':''"
							v-for="item in packageList" :key="item.id"
							@click="packageSelectChange(item.id,item.now_money)">
							<view>
								<text style="font-size: 38upx;font-weight: bold;">{{item.name}}</text>
							</view>
							<view style="margin-top: 0;">
								<text style="font-size: 24upx;padding: 0 10upx;">¥{{item.now_money}}</text>
							</view>
						</view>
						<view class="base-3"></view>
					</view>
				</view>
			</view>
		</view>
		<view style="padding:8rpx 0">
			<dp :pagecontent="pagecontent"></dp>
		</view>
		<view style="height: 130upx;"></view>
		<view class="phone-fix-btm">
			<view class="phone-fix-btm-left">
				<view>
					合计：<text>¥{{realMoney||0}}</text>
				</view>
			</view>
			<view class="phone-fix-btm-btn">
				<view>
					<u-button type="error" shape="circle" @click="onSubmit">
						<text>立即购买</text>
					</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		components: {},
		data() {
			return {
				opt:{},
				pickerItems: [],
				regiondata: '',
				// 省市区
				cityPop: false,
				region: [],
				operatorList: [{
						name: "国网",
						id: 0,
						key: "gw"
					},
					{
						name: "南网",
						id: 1,
						key: "nw"
					}
				],
				opSelect: "gw",
				packageAllList: [],
				packageList: [
					// {name:"中国移动",id:1,key:"yd",price:"97.30",relPrice:"100.00"}
				],
				packageSelect: 0,
				isSelect: true,
				notices: "",
				phone: "",
				idcard: "",
				realMoney: "",
				title: "电费充值",
				adsList: {
					"electric": "电费充值",
					"gas": "气费充值",
					"water": "水费充值"
				},
				lifeList: [{
						name: "电费充值",
						id: 0,
						key: "electric"
					},
					// {
					// 	name: "气费充值",
					// 	id: 1,
					// 	key: "gas"
					// },
					// {
					// 	name: "水费充值",
					// 	id: 2,
					// 	key: "water"
					// }
				],
				life_type: "electric",
				pagecontent:'',
			};
		},
		onLoad(e) {
			if (e.type) {
				this.life_type = e.type;
				this.title = this.adsList[e.type];
			}
			this.opt = app.getopts(e);
			
			if(this.opt.token){
				this.setlogin();
			}else{
				this.checkIsopen();
				this.loadData();
				this.loadContent();
				this.getAddress();
			}
		},
		onPullDownRefresh() {
			app.stopPullDownRefresh()
		},
		methods: {
			checkIsopen(){
				let that = this
				app.get("ApiLifePay/getIsopen", {
					type: "mobile",
				}, function(res) {
					if(res.status != 1){
						app.alert(res.msg);
					}
					
				});
			},
			setlogin() {
			  let that = this
			  app.post('ApiIndex/logintogether', { gtksession:that.opt.token }, function (res) {
					if(res.status == 1){
										//	that.login_token = res.login_token
						uni.setStorageSync('login_token',res.login_token);
						that.checkIsopen();
						that.loadData();
						that.loadContent();
						that.getAddress();
					}
			  })
			},
			jumpOrder() {
				uni.navigateTo({
					url: "/pages/thirds/orderlist"
				})
			},
			jumpPhone(){
				uni.navigateTo({
					url:"/pages/thirds/phone-bill/phone-bill"
				})
			},
			getAddress() {
				var url = app.globalData.pre_url + '/static/area.json';
				var that = this;
				uni.request({
					url: url,
					data: {},
					method: 'GET',
					header: {
						'content-type': 'application/json'
					},
					success: function(res2) {
						that.pickerItems = res2.data
					}
				});
			},
			regionchange(e) {
				const value = e.detail.value
				console.log(value[0].text + ',' + value[1].text + ',' + value[2].text);
				// this.regiondata = value[0].text + ',' + value[1].text + ',' + value[2].text
				this.regiondata = value[0].text + ',' + value[1].text
				this.region = [value[0].text, value[1].text]
			},
			packageSelectChange(id, now_money) {
				this.packageSelect = id;
				this.realMoney = now_money
			},
			lifeTypeChange(key, name) {
				var that = this;
				this.life_type = key;
				this.title = name
				that.packageList = [];
				this.packageAllList.forEach((item) => {
					if (item.life_type == key) {
						that.packageList.push(item)
					}
				});
			},
			opSelectChange(key) {
				this.opSelect = key
				this.loadData();
				this.opSelect = key
			},
			cityChange(data) {
				if (data) {
					this.region = data;
				}
			},
			async loadContent() {
				var that = this;
				app.get("ApiLifePay/payRule", {
					type: "life",
				}, function(res) {
					const res1 = res.data;
					that.pagecontent = JSON.parse(res1.rule_info);
				});
			},
			async loadData() {
				var that = this;
				//   判断申请通过跳转商铺首页
				var area_type = 0;
				switch(this.opSelect){
					case 'nw':
					  area_type = 1;
					break;
					case 'gw':
					  area_type = 2;
					break;
				}
				app.get("ApiLifePay/setMeal", {
					type: "life",
					area_type: area_type,
				}, function(res) {
					const res1 = res.data;
					that.packageAllList = res1;
					that.lifeTypeChange(that.life_type, that.adsList[that.life_type])
				});
			},
			async pays(order_id) {
				const params = {
					order_id: order_id,
					order_type: 31,
					is_wechat: 2,
					payment: 11
				}
				const res = await this.$requestAll.thirds.lifePay(params, true)
				res.data.code = res.data.code.replace(/\%/g, "+");
				app.navigateTo({
					url: "/other/pay/payCode?dd=" + encodeURIComponent(JSON.stringify(res.data))
				})
			},
			onSubmit() {
				if (!app.$u.trim(this.phone)) {
					app.error("请填写充值户号")
					return;
				}
				if (this.opSelect == "nw" && !app.$u.trim(this.idcard))
					return app.error('请填写身份证后六位');
				if (this.region.length == 0)
					return app.error('请选择所在城市');
				if (this.packageSelect == 0) {
					app.error("请选择充值套餐")
					return;
				}
				app.showLoading({
					mask: true
				})
				const params = {
					account: this.phone,
					money: this.realMoney,
					set_id: this.packageSelect,
					type: this.opSelect,
					life_type: this.life_type,
					idcard: this.idcard,
					province: this.region[0],
					city: this.region[1]
				}
				app.showLoading('提交中');
				
				app.post('ApiLifePay/lifePay', params,
				 function(res) {
					app.showLoading(false);
					if (res.status == 0) {
						app.error(res.msg);
						return;
					}
					app.goto('/pages/pay/pay?id=' + res.data.payorderid);
				});
			}
		},
		computed: {
			regionName() {
				// 转为字符串
				return this.region.map(item => item.name).join(' ');
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f9;
	}

	view {
		box-sizing: border-box;
	}

	.phone-header {
		position: relative;

		&-tips {
			position: absolute;
			padding: 10upx 16upx;
			border-radius: 80upx 80upx;
			background-color: #fee1e1;
			display: flex;
			align-items: center;
			bottom: 54%;
			left: 30upx;

			text {
				font-size: 28upx;
				color: #ff6767;
				padding-left: 10upx;
			}
		}

	}

	.phone-container {
		padding: 20upx;
		background-color: #fff;
		border-radius: 20upx 20upx;

		&-top {
			padding: 20upx;

			&-title {
				font-size: 28upx;
				font-weight: bold;
			}
		}

		&-input {
			border-bottom: 1px solid #ececec;
			padding: 20upx 20upx 10upx;
			margin-top: 20upx;

			input {
				color: #282828;
				font-size: 28upx;

			}
		}

		&-group {
			&_title {
				font-size: 26upx;
				font-weight: bold;
				margin: 20upx 0;
			}

			&_list {
				display: flex;
				width: 100%;
				justify-content: space-between;
				flex-wrap: wrap;

				&-item {
					border: 1px solid #ecebe6;
					border-radius: 10upx 10upx;
					font-size: 28upx;
					padding: 26upx 0upx;
					text-align: center;
					margin-bottom: 10upx;
				}

				.select {
					border: 1px solid #ff6767 !important;
					color: #ff6767 !important;
					background-color: #fffaf5;
				}
			}
		}
	}

	.base-4 {
		width: 24%;
	}

	.base-3 {
		width: 32%;
	}

	.phone-fav {
		position: relative;
		margin-top: 20upx;
		margin-bottom: 20upx;

		&-item {
			position: absolute;
			display: flex;
			align-items: center;
			width: 100%;
			padding: 0 40upx;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			color: #fff;
			font-size: 26upx;
		}
	}

	.phone-notices {
		padding: 20upx 20upx;
		border-radius: 20upx 20upx;
		background-color: #fff;

		text {
			font-size: 28upx;
			font-weight: bold;
		}
	}

	.phone-fix-btm {
		position: fixed;
		width: 100%;
		height: 120upx;
		display: flex;
		align-items: center;
		background-color: #fff;
		bottom: 0;
		left: 0;
		padding: 0 30upx;

		&-left {
			flex: 1;
			font-size: 28upx;

			text {
				color: #ff6767;
				font-weight: bold;
				font-size: 33upx;
			}
		}

		&-btn {
			width: 40%;
		}
	}

	.color1 {
		color: #808080;
	}
	
	.check-this{
		background: white;
	}
</style>